<script>
import { reactive,onBeforeMount } from 'vue';
import { useRouter } from 'vue-router'
import { getBookcityJsonData } from "../assets/api/bookcity.js";
export default {
    setup () {
        let router=useRouter()

        let back=()=>{
            router.go(-1)
        }

        let listObj=reactive({
            HotCategories:[],
            activityList:[],
            completBookList:[],
            hotList:[],
            endItem:[]
        })


        // 数据初始化
        let dateInit = async () => {
        let data = await getBookcityJsonData();
        listObj.HotCategories = JSON.parse(JSON.stringify(data.HotCategories));
        listObj.activityList = JSON.parse(JSON.stringify(data.activityList));
        listObj.completBookList = JSON.parse(
            JSON.stringify(data.completBookList)
        );
        listObj.hotList = JSON.parse(JSON.stringify(data.hotList));

        filterItem(listObj.HotCategories)
        filterItem(listObj.activityList)
        filterItem(listObj.completBookList)
        filterItem(listObj.hotList)




        };

        let filterItem=(item)=>{
           item.forEach(item=>{
            if(item.isEnd){
                listObj.endItem.push(item)
            }else{
                return
            }
          })
        }


        // 挂载前
        onBeforeMount(() => {
        // 数据初始化
        dateInit();
        });

        let details=(id)=>{
            router.push({path:"/Details",query:{id:id}})
        }

        return {
            back,
            listObj,
            details
        }
    }
}
</script>

<template>
    <div class="End">
        <van-sticky>
            <div class="top">
                <span class="iconfont icon-xiangzuo1" @click="back"></span>
                <p>完本</p>
                <span class="iconfont icon-xiangzuo1" style=" opacity: 0;"></span>
            </div>
        </van-sticky>
        <div class="endBox">
            <div class="endItem" v-for="(item,index) in  listObj.endItem" :key="index" @click="details(item.BookId)">
                <div class="img">
                    <img :src="item.BookImage" alt="">
                </div>
                <div class="text">
                    <div class="title">{{item.BookName}}</div>
                    <div class="content">古风很倒霉，因为一本书竟然穿越了修仙世界。最气的是，别人穿越都是穿越成人，他竟然穿越成了一座山。“我要做人。”古风大叫。其实做山也蛮好的，安全的永远不会担心死掉。就在古风这样想时，危险却悄然来临。“还让不让人活啦…不对，还让不让山活啦。”古风很愤怒，我一定要把这个世界搅得天翻地覆！世界本无仙，且看他一山成仙。一人一山，便是仙！欢迎加入古道南风书友群。527451853</div>
                    <div class="name">{{item.Author }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.End{
    min-height: 100%;
    min-width: 375px;
    max-width: 750px;
    width: 100%;
    box-sizing: border-box;
    background-color: #f8f8f8;
    .top{
            display: flex;
            width: 100%;
            padding: 0 16px;
            justify-content: space-between;
            height: 50px;
            align-items: center;
            background-color: #fff;
            box-sizing: border-box;
           .icon-xiangzuo1{
            font-size: 22px;
            color: #b1b1b1;
           }
           p{
            color: #3d3d3d;
            font-size: 16px;
            font-weight: bold;
           }
        }
        .endBox{
            padding: 0 14px 10px;
            margin-top: 10px;
            .endItem{
                border-radius: 15px;
                padding: 18px 13px;
                align-items: center;
                display: flex;
                background-color: #fff;
                margin-bottom: 10px;
                &:last-child{
                    margin-bottom: 0;
                }
                .img{
                    flex-shrink: 0;
                    width: 100px;
                    height: 134px;
                    border-radius: 10px;
                    overflow: hidden;
                }
                .text{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin-left: 20px;
                    height: 115px;
                    .title{
                        font-size: 14px;
                        font-weight: bold;
                    }
                    .content{
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        line-height: 20px;
                        font-size: 12px;
                        color: #b1b1b1;
                    }
                    .name{
                        font-size: 12px;
                        color: #7d7a7a;
                    }
                }

            }
        }
}
</style>